<template>
<div>
  <router-view></router-view>
  <!--  分割线-->
  <el-divider></el-divider>
  <!--垂直分割-->
  <span style="font-weight:bold"><span style="color:royalblue">|</span>&nbsp;基本资料</span>
  <!--  分割线-->
  <el-divider></el-divider>
  <!--    添加客户表单-->
  <el-form :label-position="labelPosition" :rules="rules" label-width="100px" :model="formLabelAlign">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="客户:" prop="client">
          <el-input v-model="formLabelAlign.client"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item prop="phone">
              <span slot="label">
                        <span class="span-box">
                            <i class="el-icon-warning"/>
                            <span> 手机号码: </span>
                        </span>
              </span>
          <el-input v-model="formLabelAlign.phone"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="客户类型:" prop="type">
          <el-select style="width: 100%" v-model="formLabelAlign.type" placeholder="请选择客户类型">
            <el-option
                v-for="item in optionsData"
                :key="item.id"
                :label="item.clientType"
                :value="item.id+''">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label=" 身份证号:" prop="cardnum">
          <el-input v-model="formLabelAlign.cardnum"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item label="身份特征:" prop="typeinfos">
          <el-checkbox-group v-model="formLabelAlign.typeinfos">
            <el-checkbox label="妇女" name="typeinfos"></el-checkbox>
            <el-checkbox label="未成年人" name="typeinfos"></el-checkbox>
            <el-checkbox label="残疾人" name="typeinfos"></el-checkbox>
            <el-checkbox label="老年人" name="typeinfos"></el-checkbox>
            <el-checkbox label="农民" name="typeinfos"></el-checkbox>
            <el-checkbox label="农民工" name="typeinfos"></el-checkbox>
            <el-checkbox label="下岗职工" name="typeinfos"></el-checkbox>
            <el-checkbox label="城市居民" name="typeinfos"></el-checkbox>
            <el-checkbox label="外来人员" name="typeinfos"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-col>
    </el-row>
    <!--垂直分割-->
    <span style="font-weight:bold"><span style="color:royalblue">|</span>&nbsp;其他选填</span>
    <!--是否展开按钮-->
    &nbsp;<el-button type="success" plain size="mini" @click="closeSearch">
    {{ word }}
    <i :class="showAll ? 'el-icon-arrow-up ': 'el-icon-arrow-down'"></i>
  </el-button>
    <!--  分割线-->
    <el-divider></el-divider>
    <!--是否展开-->
    <div v-show="zhankai">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="主要负责人:">
            <el-input v-model="formLabelAlign.principal"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="业务联系人:">
            <el-input v-model="formLabelAlign.contact"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="邮箱:">
            <el-input v-model="formLabelAlign.email"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="职务:">
            <el-input v-model="formLabelAlign.duty"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="地区影响力:">
            <el-input v-model="formLabelAlign.affectedareas"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="固定电话:">
            <el-input v-model="formLabelAlign.tel"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label=" 民族:">
            <el-select style="width: 100%" v-model="formLabelAlign.nation" placeholder="请选择所属民族">
              <el-option label="汉族" value="汉族"></el-option>
              <el-option label="满族" value="满族"></el-option>
              <el-option label="蒙古族" value="蒙古族"></el-option>
              <el-option label="回族" value="回族"></el-option>
              <el-option label="藏族" value="藏族"></el-option>
              <el-option label="维吾尔族" value="维吾尔族"></el-option>
              <el-option label="苗族" value="苗族"></el-option>
              <el-option label="彝族" value="彝族"></el-option>
              <el-option label="壮族" value="壮族"></el-option>
              <el-option label="布依族" value="布依族"></el-option>
              <el-option label="侗族" value="侗族"></el-option>
              <el-option label="瑶族" value="瑶族"></el-option>
              <el-option label="白族" value="白族"></el-option>
              <el-option label="土家族" value="土家族"></el-option>
              <el-option label="哈尼族" value="哈尼族"></el-option>
              <el-option label="哈萨克族" value="哈萨克族"></el-option>
              <el-option label="傣族" value="傣族"></el-option>
              <el-option label="黎族" value="黎族"></el-option>
              <el-option label="傈僳族" value="傈僳族"></el-option>
              <el-option label="佤族" value="佤族"></el-option>
              <el-option label="畲族" value="畲族"></el-option>
              <el-option label="高山族" value="高山族"></el-option>
              <el-option label="拉祜族" value="拉祜族"></el-option>
              <el-option label="水族" value="水族"></el-option>
              <el-option label="东乡族" value="东乡族"></el-option>
              <el-option label="纳西族" value="纳西族"></el-option>
              <el-option label="景颇族" value="景颇族"></el-option>
              <el-option label="柯尔克孜族" value="柯尔克孜族"></el-option>
              <el-option label="土族" value="土族"></el-option>
              <el-option label="达斡尔族" value="达斡尔族"></el-option>
              <el-option label="仫佬族" value="仫佬族"></el-option>
              <el-option label="羌族" value="羌族"></el-option>
              <el-option label="布朗族" value="布朗族"></el-option>
              <el-option label="撒拉族" value="撒拉族"></el-option>
              <el-option label="毛南族" value="毛南族"></el-option>
              <el-option label="仡佬族" value="仡佬族"></el-option>
              <el-option label="锡伯族" value="锡伯族"></el-option>
              <el-option label="阿昌族" value="阿昌族"></el-option>
              <el-option label="普米族" value="普米族"></el-option>
              <el-option label="朝鲜族" value="朝鲜族"></el-option>
              <el-option label="塔吉克族" value="塔吉克族"></el-option>
              <el-option label="怒族" value="怒族"></el-option>
              <el-option label="乌孜别克族" value="乌孜别克族"></el-option>
              <el-option label="俄罗斯族" value="俄罗斯族"></el-option>
              <el-option label="鄂温克族" value="鄂温克族"></el-option>
              <el-option label="德昂族" value="德昂族"></el-option>
              <el-option label="保安族" value="保安族"></el-option>
              <el-option label="裕固族" value="裕固族"></el-option>
              <el-option label="京族" value="京族"></el-option>
              <el-option label="塔塔尔族" value="塔塔尔族"></el-option>
              <el-option label="独龙族" value="独龙族"></el-option>
              <el-option label="鄂伦春族" value="鄂伦春族"></el-option>
              <el-option label="赫哲族" value="赫哲族"></el-option>
              <el-option label="门巴族" value="门巴族"></el-option>
              <el-option label="珞巴族" value="珞巴族"></el-option>
              <el-option label="基诺族" value="基诺族"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label=" 客户状态:">
            <el-select style="width: 100%" v-model="formLabelAlign.status" placeholder="请选择客户状态">
              <el-option label="--请选择客户状态--" value="-1"></el-option>
              <el-option label="潜在客户" value="1"></el-option>
              <el-option label="目标客户" value="2"></el-option>
              <el-option label="正式客户" value="3"></el-option>
              <el-option label="有效客户" value="4"></el-option>
              <el-option label="无效客户" value="5"></el-option>
              <el-option label="重点跟进" value="6"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="法定代表人:">
            <el-input v-model="formLabelAlign.legalperson"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="法人联系方式:">
            <el-input v-model="formLabelAlign.legalpersontel"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <!-- 文件上传-->
          <el-form-item label="相关文件:">
            <el-upload
                style="height: 10px"
                ref="upload"
                action=""
                :http-request="ss"
                :before-upload="beforeUpload"
                :limit=1>
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <div style="height: 40px"></div>
      <el-row>
        <el-col :span="12">
          <!--省市区级联菜单-->
          <el-form-item label="所属地区:">
            <el-cascader
                style="width: 100%"
                clearable
                size="large"
                v-model="formLabelAlign.pertainareas"
                :options="options"
                @change="handleChange"></el-cascader>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="性别:">
            <el-input v-model="formLabelAlign.sex"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="出生日期:">
            <el-date-picker type="date" placeholder="请选择出生日期" v-model="formLabelAlign.birth" style="width: 100%;"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="详细地址:">
            <el-input v-model="formLabelAlign.address"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="备注:">
            <el-input v-model="formLabelAlign.remark"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </div>
  </el-form>
  <div class="addBut">
    <el-button type="primary" plain @click="updateBut">提交</el-button>
    <el-button type="primary" plain @click="goBack">返回</el-button>
  </div>
</div>
</template>

<script>
import {regionData} from "element-china-area-data";

export default {
  name: "UpdateAdmmClientUser.vue",
  data(){
    return{
      id:this.$route.params.id,
      options: regionData,//级联选择器
      zhankai: false, // 控制展开内容显示
      showAll: true,//是否展开全部
      labelPosition: 'top',//表单顶部对齐
      //添加客户对话框表单
      formLabelAlign: {
        id:this.$route.params.id,
        fileurl: "", // 文件上传地址
        addtime: "",  // 当前时间
        systemUserId: JSON.parse(localStorage["user"])[0].id,
        flie: '',
        flieName: '',
        unitType: '', // 身份特征  多个用',' 分割
        pertainarea: "",
        pertainareas: [],//地区级联
        typeinfo: "", // 身份特征  多个用',' 分割
        typeinfos: [],
      },
      //小红星验证
      rules: {
        client: [
          {required: true, message: '请输入客户名称', trigger: 'blur'},
        ],
        phone: [
          {required: true, message: '请输入手机号码', trigger: 'blur'},
        ],
        type: [
          {required: true, message: '请选择客户类型', trigger: 'change'}
        ],
        cardnum: [
          {required: true, message: '请输入身份证号', trigger: 'blur'},
        ],
        typeinfos: [
          {type: 'array', required: true, message: '请至少选择一个身份特征', trigger: 'change'}
        ],
      },
      optionsData: [],//下拉框值
    }
  },
  created() {
    console.log(this.id)
    this.queryTypes();
    this.getAdmmClientUserNameId();
  },
  //对文字进行处理
  computed: {
    word: function () {
      if (this.showAll == false) {
        return "展开";
      } else {
        return "收起";
      }
    }
  },
  methods:{
    //修改
    updateBut(){
      console.log(this.formLabelAlign.typeinfo)
      this.formLabelAlign.typeinfo = this.formLabelAlign.typeinfos.join(",")
      this.formLabelAlign.pertainarea = this.formLabelAlign.pertainareas.join(",")
      this.formLabelAlign.addtime = this.$date.formatDate(new Date(),'yyyy-MM-DD hh:mm:ss') // 获取当前时间
      this.$http.put('admmClientUser', this.formLabelAlign)
          .then(
              this.$notify({
                type:"success",
                message:"修改成功"
              }),
              this.$router.push("AdmmClientUser")
          )
          .catch(function (error) {
            console.log(error);
          });
    },
    //根据ID查询客户信息
    getAdmmClientUserNameId() {
      this.$http
          .get("admmClientUser",{params:{id:this.id,"chaxun":"2"}})
          .then((res) => {
            console.log(res.data.data[0])
            this.formLabelAlign = res.data.data[0];
            this.formLabelAlign.typeinfos = res.data.data[0].typeinfo.split(',')
            this.formLabelAlign.pertainareas = res.data.data[0].pertainarea.split(',')
          })
          .catch(function (error) {
            console.log(error);
          });
    },
    //查询客户类型下拉框数据
    queryTypes() {
      this.$http.get('clientType')
          .then((res) => {
            this.optionsData = res.data.data;
          })
          .catch(function (error) {
            console.log(error);
          });
    },
    //级联选择器
    handleChange(value) {
      console.log(value);
    },
    //页面显示文件上传数据
    ss() {},
    //上传文件之前的钩子
    beforeUpload(file) {
      this.formLabelAlign.flie = file;
      this.formLabelAlign.flieName = file.name;
    },
    //展开收起按钮
    closeSearch() {
      this.zhankai = !this.zhankai
      this.showAll = !this.showAll;
    },
    //返回主页面
    goBack() {
      this.$router.push("AdmmClientUser")
    }
  }
}
</script>

<style scoped>
.addBut{
  text-align: center;
}
</style>